<%--
  Created by IntelliJ IDEA.
  User: 王昕喆
  Date: 2021/4/7
  Time: 14:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>我的订单</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="../../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../static/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <!-- jqgrid-->
    <link href="../../static/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">

    <link href="../../static/css/animate.css" rel="stylesheet">
    <link href="../../static/css/style.css?v=4.1.0" rel="stylesheet">

    <style>

        #tab{
            width: 600px;
            margin-top: 20px;
        }
        td{
            text-align: center;!important;
        }
        th{
            text-align: center;!important;
        }
        p input{
            width: 200px !important;
            display: inline-block !important;
        }
        select {
            width: 120px;
            height: 37px;
            text-align: center;
            text-align-last: center;
        }
    </style>
</head>
<body>
<div style="width: 100%">
    <h2 style="margin-left: 13px;display: inline-block">我的订单</h2>
</div>
<div class="jqGrid_wrapper">
    <table id="table_list_1"></table>
<%--    jqgrid增 改 删 查 刷新--%>
    <div id="pager_list_1"></div>
</div>
<%--<table align="center" class="table table-hover table-bordered" id="tab">
    <tr align="center">
        <td colspan="7">
            <p style="font-size: 20px">订单信息</p>
        </td>
    </tr>
    <tr>
        <td>序号</td>
        <td>用户</td>
        <td>管理</td>
        <td>用户地址</td>
        <td>时间</td>
        <td>总消费</td>
        <td>订单号</td>
    </tr>

    <c:forEach items="${list}" var="item">
        <tr>
            <td height="30px">${item.id}</td>
            <td>${item.userId}</td>
            <td>${item.loginName}</td>
            <td>${item.userAddress}</td>
            <td>${item.createTime}</td>
            <td>${item.cost}</td>
            <td>${item.serialNumber}</td>
        </tr>
    </c:forEach>
</table>--%>
<!-- 全局js -->
<script src="../../static/js/jquery.min.js?v=2.1.4"></script>
<script src="../../static/js/bootstrap.min.js?v=3.3.6"></script>

<!-- Peity -->
<script src="../../static/js/plugins/peity/jquery.peity.min.js"></script>

<!-- jqGrid -->
<script src="../../static/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
<script src="../../static/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>

<!-- 自定义js -->
<script src="../../static/js/content.js?v=1.0.0"></script>

<script>

    $(document).ready(function () {
        $.jgrid.defaults.styleUI = 'Bootstrap';
        let users = "";
        //请求后台数据
        $.ajax({
            url: 'order?opr=list',
            method:'POST',
            data:'',
            datatype:'JSON',
            //让异步变成同步      代表同步
            async:false,
            success:function (d){
                users=$.parseJSON(d);
            }
        })
        $("#table_list_1").jqGrid({
            data: users,
            datatype: "local",
            height: 460,
            autowidth: true,
            shrinkToFit: true,
            rowNum: 10,
            rowList: [10,],

            colNames: ['订单编号', '客户序号','登陆姓名','用户地址','订单时间','总消费','订单号','操作'],
            colModel: [
                {
                    name: 'id',
                    index: 'id',
                    width: 40,
                    // sorttype: "int"
                },
                {
                    name: 'userId',
                    index: 'userId',
                    width: 90,
                },
                {
                    name: 'loginName',
                    index: 'loginName',
                    width: 90,
                },
                {
                    name: 'userAddress',
                    index: 'userAddress',
                    width: 90,
                },
                {
                    name: 'createTime',
                    index: 'createTime',
                    width: 90,
                },
                {
                    name: 'cost',
                    index: 'cost',
                    width: 90,
                },
                {
                    name: 'serialNumber',
                    index: 'serialNumber',
                    width: 90,
                },
                {
                    name: '',
                    index: '',
                    width: 90,
                }
            ],
            //jqgrid增 改 删 查 刷新
            pager: "#pager_list_1",
            //记录信息 ！！
            viewrecords: true,

            caption: "",
            add: true,
            edit: true,
            addtext: '增加',
            edittext: '修改',
            hidegrid: false
        });
        $("#add_table_list_1").remove();
        // $("#pager_list_1_left").html("<a>点击详情</a>");
        show();



        // Add selection 默认选中第1行
        $("#table_list_1").setSelection(1, true);


        // Setup buttons  jqgrid增 改 删 查 刷新
        $("#table_list_1").jqGrid('navGrid', '#pager_list_1', {
            edit: true,
            add: true,
            del: true,
            search: true
        }, {
            height: 20,
            reloadAfterSubmit: true
        });

        $("#first_pager_list_1,#prev_pager_list_1,#next_pager_list_1,#last_pager_list_1").click(function(){
            $("#table_list_1").setSelection(1, true);
            show();
        })
    });

    function show(){
        $("#table_list_1 tr:not(:first) td:nth-child(8)").html(
            // "<button class='btn btn-info' onclick='editOrder()' type='button'><i class='fa fa-paste'></i> 编辑</button>" +
            // "&nbsp;&nbsp;&nbsp;" +
            "<button class='btn btn-info' onclick='editOrder()' type='button'><i class='fa fa-paste'></i> 详情</button>" +
            "&nbsp;&nbsp;&nbsp;" +
            "<button class='btn btn-danger' onclick='delOrder()' type='button'><i class='fa fa-trash'></i> 删除</button>");
        }
    //编辑
    function editOrder(){
        $("#table_list_1").setSelection(1, true);
        setTimeout(function (){
            let id = $("#table_list_1").find("tr[aria-selected=true]").children(":first").text()
            location.href="order?opr=getId&id="+id;
        },50)
    }
    //删除
    function delOrder(){
        let fl = confirm("确认删除吗？");
        if (fl){
            setTimeout(function (){
                let id = $("#table_list_1").find("tr[aria-selected=true]").children(":first").text()

                //点击删除 跳进del选中id  进行删除
                location.href = "order?opr=del&id="+id;
            },50)
        }else {
            alert("操作取消！！！");
            return false;
        }
    }
</script>

</body>
</html>
